<template lang="">
  <div>
    <h2 style="text-align:center;margin-top:20px">考勤记录</h2>
    <table>
      <tr>
        <th style="width:120px;text-align:center">员工</td>
        <th class="data_time">
            <span style="width:80px">日期</span>
            <span v-for="(item,index) in datalist" :key="index">{{item}}</span>
        </th>
      </tr>
      <tr v-for="item in dayinlist" :key="item.id">
        <td style="width:120px;text-align:center">{{ item.employee_name }}</td>
        <td class="com">
          <div class="left">
            <!-- <span>日期</span> -->
            <span>上午上班</span>
            <span>上午下班</span>
            <span>下午上班</span>
            <span>下午下班</span>
          </div>
          <div class="right">
            <div
              class="lis"
              v-for="(ite, index) in item.appendance_log"
              :key="index"
            >
            <div>
                    <span v-if="ite.first == 1" :title="ite.first_time">
                      <i
                        class="el-icon-check"
                        style="color: green; font-size: 18px; font-weight: bold"
                      ></i
                    ></span>
                    <span v-if="ite.first == 2">
                      <i
                        class="el-icon-close"
                        style="
                          color: rgb(144, 148, 140);
                          font-size: 18px;
                          font-weight: bold;
                        "
                      ></i
                    ></span>
                    <span v-if="ite.first == 3" :title="ite.first_time">
                      迟到</span
                    >
                    <span v-if="ite.first == 4"> 休息</span>
                    <span v-if="ite.first == 5"> 请假</span>
                  </div>

                  <!-- 上午下班 -->
                  <div>
                    <span v-if="ite.two == 1" :title="ite.two_time">
                      <i
                        class="el-icon-check"
                        style="color: green; font-size: 18px; font-weight: bold"
                      ></i
                    ></span>
                    <span v-if="ite.two == 2">
                      <i
                        class="el-icon-close"
                        style="
                          color: rgb(144, 148, 140);
                          font-size: 18px;
                          font-weight: bold;
                        "
                      ></i
                    ></span>
                    <span v-if="ite.two == 3" :title="ite.two_time">
                      迟到</span
                    >
                    <span v-if="ite.two == 4"> 休息</span>
                    <span v-if="ite.two == 5"> 请假</span>
                    <span v-if="ite.two == 6" :title="ite.two_time">早退</span>
                  </div>
                   <!-- 下午上班 -->
                   <div>
                    <span v-if="ite.three == 1" :title="ite.three_time">
                      <i
                        class="el-icon-check"
                        style="color: green; font-size: 18px; font-weight: bold"
                      ></i
                    ></span>
                    <span v-if="ite.three == 2">
                      <i
                        class="el-icon-close"
                        style="
                          color: rgb(144, 148, 140);
                          font-size: 18px;
                          font-weight: bold;
                        "
                      ></i
                    ></span>
                    <span v-if="ite.three == 3" :title="ite.three_time">
                      迟到</span
                    >
                    <span v-if="ite.three == 4"> 休息</span>
                    <span v-if="ite.three == 5"> 请假</span>
                  </div>

                   <!-- 下午下班 -->
                   <div>
                    <span v-if="ite.fore == 1" :title="ite.fore_time">
                      <i
                        class="el-icon-check"
                        style="color: green; font-size: 18px; font-weight: bold"
                      ></i
                    ></span>
                    <span v-if="ite.fore == 2">
                      <i
                        class="el-icon-close"
                        style="
                          color: rgb(144, 148, 140);
                          font-size: 18px;
                          font-weight: bold;
                        "
                      ></i
                    ></span>
                    <span v-if="ite.fore == 3" :title="ite.fore_time">
                      迟到</span
                    >
                    <span v-if="ite.fore == 4"> 休息</span>
                    <span v-if="ite.fore == 5"> 请假</span>
                    <span v-if="ite.two == 6" :title="ite.two_time">早退</span>
                  </div>
            </div>
          </div>
        </td>
      </tr>
    </table>
  </div>
</template>
<script>
export default {
  data() {
    return {
      dayinlist: [],
      datalist:[]
    };
  },
  mounted() {
    this.dayinlist = JSON.parse(this.$route.query.data);

    console.log(this.dayinlist);
    console.log(this.dayinlist[0].appendance_log);
    let datalist=[]
    this.dayinlist[0].appendance_log.forEach(element => {
        datalist.push(element.date)
    });
    this.datalist=datalist
  },
  method: {},
};
</script>
<style scoped>
body,*{
    padding: 0;
    margin: 0;
}
div,span,table,tr,td{
    padding: 0;
    margin: 0;
}
table{
    width: 1400px;
    margin: 0 auto;
    border-collapse: collapse;
    border: #333 solid 1px;
    margin-top: 25px;
}

table tr{
    /* border-right: 1px solid #333;
	border-bottom: 1px solid #333; */
}

table th,table td{
    border-right: 1px solid #333;
	border-bottom: 1px solid #333;
    min-height: 35px;
    line-height: 35px;
}
.com{
    display: flex;
}
.left{
    width:80px;
    min-width: 80px;
    display: flex;
    flex-direction:column;
    text-align: center;
}
.left span{
    height:40px;
   border-top: 1px solid #333;
}
.left span:first-child{
   border:none
}
.right{
    display: flex;
}

.right .lis{
    width: 40px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    border-left: 1px solid #333;
}
.right .lis:last-child{
    border-right: 1px solid #333;
}

.right .lis div{
    width: 40px;
    height: 40px;
    border-top: 1px solid #333;
    display: flex;
    justify-content: center;
    align-items: center;
    
}
.right .lis div:first-child{
    border-top: none;
}

.data_time{
  display:flex
}
.data_time span{
    display: block;
    width: 40px;
    height: 40px;
    text-align: center;
    border-left: 1px solid #333;
}

.data_time span:first-child{
    border: none;
}
.data_time span:last-child{
    border-right:1px solid #333;
}

</style>
